<template>
  <div class="truck-choose-wrapper">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="800px  "
      class="tableDialog"
      :before-close="handleClose"
      v-if="!isTypeCompany"
    >
      <div class="dialog-container">
        <div class="columnLayout container">
          <section class="left-container">
            <el-tree
              :data="data"
              :props="defaultProps"
              :expand-on-click-node="false"
              @node-click="getList3($event,page);"
            >
              <section class="custom-tree-node" slot-scope="{ node, data }">
                <section style="width: 100px">{{ node.label }}</section>
              </section>
            </el-tree>
          </section>
          <section class="right-container">
            <div class="dialogSearch">
              <el-input v-model="inputName" placeholder="请输入产品名称" @input=" getList2 ($event,true)">
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-input>

              <el-table
                size="mini"
                v-loading="loading"
                :data="tableData"
                style="width: 100%; margin-top: 10px"
                border
                :header-cell-style="{
                'background-color': '#eeeeee !important',
              }"
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="60"
                  align="center"
                >
                  <template slot-scope="scope">
                  <span>{{
                      (page.pageNo - 1) * page.pageSize + scope.$index + 1
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="名称"
                  :show-overflow-tooltip="true"
                  header-align="left"
                  align="left"
                >
                </el-table-column>
                <el-table-column label="操作" width="75px"
                                 header-align="left">
                  <template slot-scope="scope">
                    <el-link
                      type="primary"
                      :underline="false"
                      @click="selectRow(scope.row)"
                    >选择
                    </el-link
                    >
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                background
                @current-change="handleCurrentChange"
                :page-size="page.pageSize"
                :current-page="page.pageNo"
                layout="total,prev, pager, next"
                :total="page.total"
              >
              </el-pagination>
            </div>
          </section>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="800px  "
      class="tableDialog"
      :before-close="handleClose"
      v-if="isTypeCompany"
    >
      <div class="dialog-container">
        <div class="columnLayout container">
          <section class="left-container">
            <el-tree
              :data="treeDataList"
              :props="defaultProps"
              :expand-on-click-node="false"
              @node-click="getList3($event,page);"
            >
              <section class="custom-tree-node" slot-scope="{ node, data }">
                <section style="width: 100px">{{ node.label }}</section>
              </section>
            </el-tree>
          </section>
          <section class="right-container">
            <div class="dialogSearch">
              <el-input v-model="inputName" placeholder="请输入产品名称" @input="handleSearch">
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-input>

              <el-table
                size="mini"
                v-loading="loading"
                :data="tableData"
                style="width: 100%; margin-top: 10px"
                border
                :header-cell-style="{
                'background-color': '#eeeeee !important',
              }"
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="60"
                  align="center"
                >
                  <template slot-scope="scope">
                  <span>{{
                      (page.pageNo - 1) * page.pageSize + scope.$index + 1
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="名称"
                  :show-overflow-tooltip="true"
                  header-align="left"
                  align="left"
                >
                </el-table-column>
                <el-table-column label="操作" width="75px"
                                 header-align="left">
                  <template slot-scope="scope">
                    <el-link
                      type="primary"
                      :underline="false"
                      @click="selectRow(scope.row)"
                    >选择
                    </el-link
                    >
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                background
                @current-change="handleNewCurrentChange"
                :page-size="newDataPage.pageSize"
                :current-page="newDataPage.pageNo"
                layout="total,prev, pager, next"
                :total="newDataPage.total"
              >
              </el-pagination>
            </div>
          </section>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {getTreeData, getList} from '@/api/market/product.js'
  import {dynamicWindowList} from '@/api/market/crm.js'
  export default {
    data () {
      return {
        isTypeCompany: false,       // 是否需要前端自己传 sql 语句
        newDataPage: {
          pageSize: 10,
          pageNo: 1
        },                           // 新的分页数据设置
        newData: [],                 // 新的数据list全部数据
        itemDictCode: '',            // 需要使用的sql数据，可在父组件定义，默认是空
        treeDataList: [],            // 自己传sql数据展示tree数据
        tableData: [],               // 根据前端设置的分页情况处理的数据list
        loading: false,               // table 加载状态
        dialogVisible: false,
        inputName: '',
        data: [],
        title: '选择产品',
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 20
        },
        defaultProps: {
          // 修改el-tree默认data数组参数
          label: 'name',
          id: 'id',
          parentId: 'parentId',
          children: 'children'
        }
      }
    },
    methods: {
      getTreeData (id) {
        getTreeData({id: id, types: null}).then((res) => {
          if (res.data.code === '200') {
            this.data = res.data.result
          }
        })
      },
      handleCurrentChange (e) {
        this.page.pageNo = e
        this.getProductList(this.page)
      },
      // 获取列表
      getProductList (params, categoryId) {
        this.loading = true
        getList({
          state: 1,
          pageSize: params.pageSize,
          pageNo: params.pageNo,
          productCategoryId: categoryId
        }).then((res) => {
          if (res.data.code === '200') {
            this.tableData = res.data.result.list
            this.page.total = res.data.result.count
            this.loading = false
          }
        })
    },

      // 点击树获取列表和搜索获取列表
      getList2 ($event, isSearch) {
        if (isSearch) {
          getList({name: $event, state: 1}).then((res) => {
            if (res.data.code === '200') {
              this.tableData = res.data.result.list
              this.page.total = res.data.result.count
            }
          })
        }
      },
      getList3 ($event, params) {
        this.loading = true
        params.pageNo = 1
      getList({
          'productCategoryId': $event.id,
          state: 1,
          pageSize: params.pageSize,
          pageNo: params.pageNo
        }).then((res) => {
          if (res.data.code === '200') {
            this.tableData = res.data.result.list
            this.page.total = res.data.result.count
          }
        this.loading = false
        }).catch(err => {
        this.loading = false
      })
      },

      tableRowClassName ({row, rowIndex}) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      },
      // 选择行
      selectRow (row) {
        this.$emit('getProductData', row)
        this.dialogVisible = false
      },

      handleClose (done) {
        done()
      },
      // 获取列表 （传sql 数据）
      getDynamicWindowList () {
        dynamicWindowList({
          keySQL: this.itemDictCode
        }).then((res) => {
          if (res.data.code === '200') {
            /*
            *  返回两条数据
            *  一条是tree树形结构
            *  一条是tableList 数据
            * */
            this.newData = res.data.result.dataList
            this.treeDataList = res.data.result.treeDataList
            this.newDataPage.total = this.newData.length
            this.handleNewCurrentChange()
          }
          this.loading = false
        }).catch(err => {
          this.loading = false
        })
      },
      // 分页数据整理
      handleNewCurrentChange (e) {
        this.newDataPage.pageNo = e || this.newDataPage.pageNo
        this.tableData = this.newData.slice(
          (this.newDataPage.pageNo - 1) * this.newDataPage.pageSize,
          this.newDataPage.pageSize * this.newDataPage.pageNo
        )
      },
      // 筛选列表中的数据
      handleSearch (e) {
        this.loading = true
        if (e) {
          const value = e
          const expandedKeys = this.newData
            .map(item => {
              if (item.name.indexOf(value) > -1) {
                return item
              }
              return null
            })
            .filter((item, i, self) => item && self.indexOf(item) === i)
          Object.assign(this, {
            tableData: expandedKeys
          })
          this.loading = false
        } else {
          this.handleNewCurrentChange()
          this.loading = false
        }
      },
      // 初始化数据
      initData () {
        if (this.isTypeCompany) {
          this.getDynamicWindowList()
        } else {
          this.getCompanyList(this.page)
        }
        this.mark = '客户'
      },
      init () {
        this.dialogVisible = true
        this.getTreeData(0)
        this.getProductList(this.page)
      }

    },

  }
</script>
<style scoped lang="scss">
  // .dialog-container {
  //   width: 100%;
  // }

  // .container {
  //   width: 100%;
  //   height: 500px;
  //   display: flex;
  // }

  // .left-container {
  //   margin-right: 20px;
  //   width: 100px;
  //   overflow: auto; /*当内容超过，出现滚动条*/
  // }

  // .dialog-footer {
  //   width: 200px;
  //   margin: 0 auto;
  //   margin-bottom: 20px;
  // }

  // .el-table .success-row {
  //   background: #f0f9eb;
  // }

  // ::v-deep .el-table .warning-row {
  //   background: #f7f7f7;
  // }
  ::v-deep .el-pagination {
    margin-top: 30px;
    text-align: right;
  }

  ::v-deep .el-dialog__body {
    padding: 20px 20px 0 !important;
  }

  .dialog-container {
    width: 100%;
  }

  /*.container {*/
  /*  width: 100%;*/
  /*  !*height: 500px;*!*/
  /*  display: flex;*/
  /*  !*height: 550px;*!*/
  /*}*/

  /*.left-container {*/
  /*  width: 180px;*/
  /*  overflow: auto; //!*当内容超过，出现滚动条*!*/
  /*  background: #FFFFFF;*/
  /*  box-shadow: 0px 0px 6px 0px rgba(4, 0, 0, 0.1);*/
  /*  border-radius: 6px;*/
  /*  // margin-right: 10px;*/
  /*  height: 450px;*/
  /*}*/

  .dialog-footer {
    width: 200px;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  ::v-deep .el-table .warning-row {
    background: #f7f7f7;
  }

  .truck-choose-wrapper {
    ::v-deep.el-dialog {
      .el-dialog__body {
        padding: 20px 20px 24px !important;
      }
    }
  }
</style>
